<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>echart自适应实例</title>
    {% include 'common/echart_base.html' %}
<script type="text/javascript">
    $(document).ready(function () {

        /*
        baseOption、以及 media 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。
        baseOption 是必然被使用的，此外，满足了某个 query 条件时，对应的 option 会被使用 chart.mergeOption() 来 merge 进去。

         */
        var option={
            baseOption : {
                legend:{itemWidth:30,icon:'roundRect',orient:'horizontal'},
                //开启tooltip显示
                tooltip:{width:30,textStyle:{color:'yellow'}},
                backgroundColor:'#eedeb0',
                dataset: {
                    dimensions:['score', 'amount', 'product','price'],
                    source: [
                        {product: 'Matcha Latte', count: 823, score: 95.8,price:50},
                        {product: 'Milk Tea', count: 235, score: 81.4,price:56},
                        {product: 'Cheese Cocoa', count: 1042, score: 91.2,price:45},
                        {product: 'Walnut Brownie', count: 988, score: 76.9,price:60}
                    ]
                },
                xAxis: {name:['score','price']},
                yAxis: {type: 'category',name:'product'},
                grid:{
                    left: '15%',
                },
                series: [
                    {
                        name:'price',
                        type: 'bar',
                        encode: {
                            // 将 "amount" 列映射到 X 轴。
                            tooltip:['price'],
                            //seriesName: [0, 1],
                            x: ['price'],
                            // 将 "product" 列映射到 Y 轴。
                            y: 'product'
                        }
                    },
                    {
                        name:'score',
                        type: 'bar',
                        encode: {
                            // 将 "amount" 列映射到 X 轴。
                            tooltip:['score'],
                            //seriesName: [0, 1],
                            x: ['score'],
                            // 将 "product" 列映射到 Y 轴。
                            y: 'product'
                        }
                    }
                ]
            },

            media:[
                {
                    query:{
                        maxWidth:699,
                        //minWidth:300
                        //minAspectRatio: 2
                    },
                    option:{
                        legend:{orient:'vertical',itemWidth:250},
                        backgroundColor:'#edd1d8',
                    }
                },
                {
                    query:{
                        minWidth:700,
                        maxWidth:1200
                        //minAspectRatio:1.5
                    },
                    option:{
                        legend:{orient:'vertical',itemWidth:400},
                        backgroundColor:'#bce672',
                    }
                },
                {
                    //这条里没有写规则，表示『默认』，即所有规则都不满足时，采纳这个option。和baseOption保持一致可以使布局恢复到baseOption的状态
                    option:{
                        legend:{orient:'horizontal',itemWidth:30,icon:'roundRect'},
                        backgroundColor:'#eedeb0',
                    }
                }
            ]

        }

        myChart=echarts.init(document.getElementById('echart_media'));
        myChart.setOption(option);

        window.addEventListener("resize", function () {
            myChart.resize();
        });
    })

</script>
</head>
<body >

    <div id="echart_media" style="margin:0 auto;width:80%;height:600px"></div>
{#    <div style="margin:0 auto;width:80%;height:600px;border: 2px solid blue;"></div>#}
</body>
</html>